<template>
  <el-dialog class="leftdetails" title="电梯详情信息" :visible.sync="dialogVisible1" :before-close="handleClose" width="90%" id="content">
    <div class="first">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>概况</span>
        </div>
        <div class="text1">
          <div class="left_box">
            <div class="title">
              <h1 style="font-weight:800">健康评分</h1>
              <!-- <div class="icon"><i class="el-icon-download"></i><i class="el-icon-refresh"></i></div> -->
            </div>
            <Gauge ref="Gauge" />
          </div>
          <div class="right_box">
            <p>巡查统计:{{eleInfoSituation.patrolNum}}分</p>
            <p>维保统计:{{eleInfoSituation.maintNum}}分</p>
            <p>定检统计:{{eleInfoSituation.examinationNum}}分</p>
            <!-- <el-button type="primary" size="small" @click="onexport">导出数据</el-button> -->
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div class="text2">
          <div style="display:flex">
            <div style="font-weight:800;width:25%">设备注册代码: </div>
            <div>{{eleBaseInfoDetail.eleCode}}</div>
          </div>
          <div style="display:flex">
            <div style="font-weight:800;width:25%">设备类型: </div>
            <div>{{eleBaseInfoDetail.eleTypeName}}</div>
          </div>
          <div style="display:flex">
            <div style="font-weight:800;width:25%">设备状态: </div>
            <div>{{eleBaseInfoDetail.eleStatusName}}</div>
          </div>
          <div style="display:flex">
            <div style="font-weight:800;width:25%">设备地址: </div>
            <div style="cursor: pointer;" @click="showMap"><i class="el-icon-map-location"></i>{{eleBaseInfoDetail.eleUseCommunity}}</div>
          </div>
          <p style="border-top: solid 1px #e7eaec;line-height:30px"><span style="font-weight:800">最低楼层</span><span
              style="margin-left:25px">{{eleBaseInfoDetail.startFloor}}</span></p>
          <table>
            <tr class="t">
              <td style="font-weight:800">规格型号</td>
              <td>{{eleBaseInfoDetail.eleSpecification}}</td>
              <td style="font-weight:800">油缸数量</td>
              <td>{{eleBaseInfoDetail.hydroCylinderNum}}</td>
            </tr>
            <tr class="t">
              <td style="font-weight:800">额定速度</td>
              <td>{{eleBaseInfoDetail.ratedSpeed}}</td>
              <td style="font-weight:800">标示下行机械动作速度</td>
              <td>{{eleBaseInfoDetail.mechanicalSpeed}}</td>
            </tr>
            <tr>
              <td style="font-weight:800">额定载重量</td>
              <td>{{eleBaseInfoDetail.ratedLoad}}</td>
              <td style="font-weight:800">提升高度</td>
              <td>{{eleBaseInfoDetail.liftHeight}}</td>
            </tr>
            <tr class="t">
              <td style="font-weight:800">乘站门</td>
              <td>{{eleBaseInfoDetail.landDoor}}</td>
              <td style="font-weight:800">驱动方式</td>
              <td>{{eleBaseInfoDetail.drivenMode}}</td>
            </tr>
            <tr>
              <td style="font-weight:800">顶升型式</td>
              <td>{{eleBaseInfoDetail.jackType}}</td>
              <td style="font-weight:800">安全钳规格型号</td>
              <td>{{eleBaseInfoDetail.safetyGear}}</td>
            </tr>
          </table>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>关联单位</span>
        </div>
        <div class="text3">
          <table>
            <tr>
              <td style="width:25%">使用单位</td>
              <td>{{eleLinkOrg.useOrgName}}</td>
            </tr>
            <tr>
              <td>使用单位电话</td>
              <td>{{eleLinkOrg.useOrgTel}}</td>
            </tr>
            <tr>
              <td>维保单位</td>
              <td>{{eleLinkOrg.maintOrgName}}</td>
            </tr>
            <tr>
              <td>维保单位电话</td>
              <td>{{eleLinkOrg.maintOrgTel}}</td>
            </tr>
            <tr class="t">
              <td>检验单位</td>
              <td>{{eleLinkOrg.checkOrgName}}</td>
            </tr>
            <tr>
              <td>制造单位</td>
              <td>{{eleLinkOrg.manufacturerName}}</td>
            </tr>
            <tr>
              <td>注册登记机构</td>
              <td>{{eleLinkOrg.regOrgName}}</td>
            </tr>
          </table>
        </div>
      </el-card>
    </div>
    <div class="second">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>维保记录</span>
        </div>
        <div class="text4">
          <el-table :data="miantData" style="width: 100%" :header-cell-style="{ 
      fontWeight:800}">
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="planName" label="计划名称">
            </el-table-column>
            <el-table-column prop="realName" label="维保负责人">
            </el-table-column>
            <el-table-column prop="phonenumber" label="联系电话">
            </el-table-column>
            <el-table-column prop="finishTime" label="计划开始时间">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="miantpagination.pageNum"
            :page-size="miantpagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
            :total="miantpagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>巡查记录</span>
        </div>
        <div class="text5">
          <el-table :data="patrolData" style="width: 100%" :header-cell-style="{ 
      fontWeight:800}">
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="checkName" label="巡查记录名称">
            </el-table-column>
            <el-table-column prop="checkRemark" label="巡查记录说明">
            </el-table-column>
            <el-table-column prop="checkResult" label="巡查结果">
            </el-table-column>
            <el-table-column prop="checkUser" label="巡查人">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page.sync="patrolpagination.pageNum"
            :page-size="patrolpagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
            :total="patrolpagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog :visible.sync="dialogVisible" append-to-body v-if="dialogVisible">
      <baidu-map class="map" :center="{lng: eleLocation[1], lat: eleLocation[0]}" :zoom="15" scroll-wheel-zoom>
        <bm-marker :position="{lng: eleLocation[1], lat: eleLocation[0]}">
        </bm-marker>
      </baidu-map>
    </el-dialog>
  </el-dialog>
</template>

<script>
import Gauge from '@/components/echarts/Gauged.vue'
import { getselectEleInfoDetail } from '@/api/elevator'
export default {
  components: {
    Gauge
  },
  data () {
    return {
      locDialog: true,
      dialogVisible1: false,
      dialogVisible: false,
      miantpagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      patrolpagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      miantData: [],
      patrolData: [],
      eleCode: '',
      eleBaseInfoDetail: {},
      eleInfoSituation: {},
      eleLinkOrg: {},
      eleLocation: []
    }
  },
  methods: {
    onexport () {
    },
    getPageData () {
      getselectEleInfoDetail({
        "eleCode": this.eleCode,
        "miantPageNum": this.miantpagination.pageNum,
        "miantPageSize": this.miantpagination.pageSize,
        "patrolPageNum": this.patrolpagination.pageNum,
        "patrolPageSize": this.patrolpagination.pageSize,
      }).then(res => {
        if (res.data.code == '200') {
          this.miantData = res.data.data.maintRecordPage.list
          this.miantpagination.pageTotal = res.data.data.maintRecordPage.total
          this.patrolData = res.data.data.patrolRecordPage.list
          this.patrolpagination.pageTotal = res.data.data.patrolRecordPage.total
          this.eleBaseInfoDetail = res.data.data.eleBaseInfoDetail
          this.eleInfoSituation = res.data.data.eleInfoSituation
          this.eleLinkOrg = res.data.data.eleLinkOrg
          this.eleLocation = this.eleBaseInfoDetail.eleLocation.split(",")
          console.log(this.eleLocation)
          this.$refs.Gauge.healthNum = this.eleInfoSituation.healthNum
          this.$refs.Gauge.initCharts()
        }
      })
    },
    handleClose () {
      this.dialogVisible1 = false
    },
    showMap () {
      this.dialogVisible = true
    },
    handleSizeChange (val) {
      this.miantpagination.pageNum = 1
      this.miantpagination.pageSize = val
    },
    handleCurrentChange (val) {
      this.miantpagination.pageNum = val
    },
    handleSizeChange1 (val) {
      this.patrolpagination.pageNum = 1
      this.patrolpagination.pageSize = val
    },
    handleCurrentChange1 (val) {
      this.patrolpagination.pageNum = val
    },
  }
};
</script>
<style lang="less" scoped>
.leftdetails {
  padding: 0 15px 15px 15px;
  .clearfix {
    font-weight: 800;
  }
  .first {
    display: flex;

    justify-content: space-between;
    .box-card {
      width: 32%;
      .text1 {
        display: flex;
        justify-content: space-between;
        .left_box {
          width: 65%;
          .title {
            display: flex;
            justify-content: space-between;
          }
          .icon {
            font-size: 20px;
            cursor: pointer;
          }
          .el-icon-download {
            margin-right: 5px;
          }
        }
        .right_box {
          margin-top: 20px;
          p {
            line-height: 30px;
          }
        }
      }
      .text2 {
        table {
          width: 100%;
          height: auto;
          td {
            line-height: 30px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          tr:nth-child(odd) {
            border-top: solid 1px #e7eaec;
            border-bottom: solid 1px #e7eaec;
          }
        }
        div {
          line-height: 30px;
        }
      }
      .text3 {
        table {
          width: 100%;
          height: auto;
          td {
            line-height: 30px;
          }
          td:first-child {
            font-weight: 800;
          }
          tr:nth-child(odd) {
            border-top: solid 1px #e7eaec;
            border-bottom: solid 1px #e7eaec;
          }
        }
      }
    }
  }
  .second {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    .box-card {
      width: 49%;
    }
  }
}
.el-icon-map-location {
  margin-right: 5px;
}
.map {
  width: 100%;
  height: 500px;
}
</style>